import React, { lazy, Suspense } from 'react'

import { Navigate, createBrowserRouter } from 'react-router-dom'

import Layout from '@/layout'
import Authorized from '@/components/Authorized'

const Home = lazy(() => import('@/view/Home'))
const Login = lazy(() => import('@/view/LogIn'))
const NotFound = lazy(() => import('@/view/NotFound'))

const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '/login',
        element: <Suspense>
          <Authorized>
            <Login />
          </Authorized>
        </Suspense>
      },
      {
        path: '/home',
        element: <Suspense>
          <Home />
        </Suspense>
      },
      {
        path: '/',
        element: <Navigate to="/home" />
      }
    ]
  },
  {
    path: '/404',
    element: <Suspense>
      <NotFound />
    </Suspense>
  },
  {
    path: '*',
    element: <Suspense>
      <NotFound />
    </Suspense>
  }
]

const router = createBrowserRouter(routes, {
  basename: '/'
})

export default router
